How to Identify Performance Bottlenecks with Cloudflare’s GraphQL Datasets

Erfi Anugrah

Overview

What we’ll cover:

  1. Understanding Performance Metrics
  2. Common Performance Issues
  3. Analysis Workflow
  4. Demo

Key Metrics

1. Response Times

  • Edge TTFB (Time to First Byte - includes origin response)
  • Origin Response Time
  • P50/P95/P99 Latencies

2. Cache Stats

  • Hit Ratio
  • Cache Status

3. Reliability

  • Error Rates
  • Geographic Distribution Data

Analysis Flow

%%{init: {
  'theme': 'dark',
  'themeVariables': {
    'primaryColor': '#ff9800',
    'primaryTextColor': '#fff',
    'primaryBorderColor': '#fff',
    'lineColor': '#fff',
    'secondaryColor': '#006064',
    'tertiaryColor': '#4caf50',
    'mainBkg': '#2d3436',
    'nodeBorder': '#ff9800',
    'clusterBkg': '#2d3436',
    'clusterBorder': '#ff9800',
    'fontSize': '20px'
  },
  'flowchart': {
    'nodeSpacing': 50,
    'rankSpacing': 100,
    'curve': 'basis'
  }
}}%%
graph TB
    Collect[Collect Metrics] --> Analyze{Analysis}
    Analyze --> Edge[Edge Analysis]
    Analyze --> Origin[Origin Analysis]
    Analyze --> Cache[Cache Analysis]
    Edge --> TTFB[Edge TTFB]
    Edge --> Geo[Geographic Distribution]
    Edge --> Errors[Error Rates]
    Origin --> Geo[Geographic Distribution]
    Origin --> Errors[Error Rates]
    Origin --> Response[Origin Response Time]
    Cache --> HitRatio[Hit Ratio]
    TTFB --> Issues{Issues}
    Geo --> Issues
    Response --> Issues
    Errors --> Issues
    HitRatio --> Issues

    classDef orange fill:#ff9800,stroke:#fff,stroke-width:4px,color:#fff;
    classDef blue fill:#006064,stroke:#fff,stroke-width:4px,color:#fff;
    classDef green fill:#4caf50,stroke:#fff,stroke-width:4px,color:#fff;

    class Collect,Analyze orange;
    class Edge,Origin,Cache blue;
    class TTFB,Geo,Response,Errors,HitRatio,Efficiency green;
    class Issues orange;

Request Flow

%%{init: {
  'theme': 'dark',
  'themeVariables': {
    'primaryColor': '#ff9800',
    'primaryTextColor': '#fff',
    'primaryBorderColor': '#fff',
    'lineColor': '#fff',
    'secondaryColor': '#006064',
    'tertiaryColor': '#4caf50',
    'mainBkg': '#2d3436',
    'nodeBorder': '#ff9800',
    'actorBorder': '#ff9800',
    'actorBackground': '#ff9800',
    'actorTextColor': '#fff',
    'noteBorderColor': '#006064',
    'noteTextColor': '#fff',
    'noteBackground': '#006064'
  }
}}%%
sequenceDiagram
    participant User
    participant Edge
    participant Cache
    participant Origin
    
    User->>Edge: Request
    Edge->>Cache: Check Cache
    alt Cache Hit
        Cache-->>Edge: Serve from Cache
        Edge-->>User: Fast Response
        Note over Edge,User: Typical: <50ms
    else Cache Miss
        Cache-->>Edge: Not Found
        Edge->>Origin: Forward Request
        Note over Origin: Process Request
        Origin-->>Edge: Response
        Edge->>Cache: Store in Cache
        Edge-->>User: Slower Response
        Note over Edge,User: Typical: >100ms
    end

Common Issues

1. High TTFB

  • Check origin server response times
  • Check network paths - MTRs/traceroutes
  • Monitor backend latency - Prometheus metrics of services

2. Cache Problems

  • Review Cache Rules
  • Analyze MISS patterns

3. Regional Issues

  • Check traffic patterns

Geographic Analysis

%%{init: {
  'theme': 'dark',
  'themeVariables': {
    'primaryColor': '#ff9800',
    'primaryTextColor': '#fff',
    'primaryBorderColor': '#fff',
    'lineColor': '#fff',
    'secondaryColor': '#006064',
    'tertiaryColor': '#4caf50',
    'mainBkg': '#2d3436',
    'nodeBorder': '#ff9800',
    'clusterBkg': '#2d3436',
    'clusterBorder': '#ff9800'
  }
}}%%
graph TB
    A[Geographic Analysis] --> B{Performance Metrics}
    B --> C[Response Times]
    B --> D[Cache Performance]
    B --> E[Error Rates]
    C --> F[Regional TTFB]
    C --> G[Origin Latency]
    D --> H[Regional Cache Hits]
    D --> I[Bandwidth Usage]
    E --> J[Error Distribution]
    E --> K[Timeout Patterns]
    F --> L{Action Items}
    G --> L
    H --> L
    I --> L
    J --> L
    K --> L
    L --> M[Build Observability]
    L --> N[Origin Placement]
    L --> O[Cache Rules]
    L --> P[Error Handling]

    classDef orange fill:#ff9800,stroke:#fff,stroke-width:2px,color:#fff;
    classDef blue fill:#006064,stroke:#fff,stroke-width:2px,color:#fff;
    classDef green fill:#4caf50,stroke:#fff,stroke-width:2px,color:#fff;

    class A,B,L orange;
    class C,D,E blue;
    class F,G,H,I,J,K,M,N,O,P green;

Optimization Recommendations

Issue Investigate Solution
High TTFB Origin response times - Optimize application logic
- Horizontal/vertical Scaling
Low Cache Hit Ratio Cache rule analysis - Add “cache everything” type rules
- Review TTL settings
- Set up custom cache keys
Regional Geographic distribution - Add origins in more locations
Bandwidth CDN - Enable compression (gzip, brotli, zstd)

Monitoring Tools

  • Response time graphs
  • Cache hit ratios
  • Error rate tracking
  • Bandwidth usage
  • Geographic distribution
  • Real User Monitoring
  • Traceroute analysis
  • SSL/TLS metrics
  • Performance thresholds
  • Error rate spikes
  • Cache efficiency drops
  • Origin health
  • Edge status

Demo and Q&A